import React, { useRef, useState } from 'react';
import { axconst } from '@/shared/axconst';
import {
  AxStandardCardButtonType,
  AxStandardCardFilterType,
} from '@/components/AxList/AxStandardLayout/data.d';
import { AxStandardWideList } from '@/components/AxList/AxStandardWideList';
import AxColumnAction from '@/components/AxList/AxColumnAction';
import { AxColumnEnum } from '@/components/AxList';
import { router } from 'umi';
import { axhelper } from '@/shared/axhelper';
import Detail from './components/detail';
import { axhttp } from '@/utils/axhttp';
import { message } from 'antd';

const url = {
  read: '/api/order/read',
  update: '/api/order/update',
};
const Index: React.FC<any> = props => {
  const user = axhelper.getUserInfo();
  const [expandedRowKeys, setExpandedRowKeys] = useState(['1']);
  const [detailVisible, setDetailVisible] = useState(false);
  const [operateValues, setOperateValues] = useState({});
  const { postFormXhr } = axhttp;
  const ref = useRef<any>({});

  /** 配置列 */
  const columns: any[] = [
    {
      title: '订单编号',
      dataIndex: 'orderNo',
      width: axconst.width.longx,
    },
    {
      title: '购买人',
      dataIndex: 'person',
      width: axconst.width.orderTitle,
    },
    // {
    //   title: '收货人',
    //   dataIndex: 'receiver',
    //   width: axconst.width.productName,
    // },
    
    {
      title: '订单总额',
      dataIndex: 'payment',
      width: axconst.width.four,
    },
    {
      title: '收货地址',
      dataIndex: 'address',
      width: axconst.width.address,
    },
    {
      title: '下单时间',
      dataIndex: 'createTime',
      width: axconst.width.long,
    },
    {
      title: '订单状态',
      dataIndex: 'orderStatus',
      width: axconst.width.four,
      render: (val: any) => AxColumnEnum({ enumName: 'orderStatus', value: val }),
    },
    {
      title: '操作',
      fixed: 'right',
      width: axconst.width.operate4,
      render: (value: any, record: any) => {
        return (
          <AxColumnAction
            buttons={[
              {
                text: '取消订单',
                popconfirm: true,
                onClick: () => handleCancel(record),
              },
              {
                text: '确认收货',
                popconfirm: true,
                onClick: () => handleReceive(record),
            },
              {
                text: '订单详情',
                onClick: () => {
                  setOperateValues(record);
                  setDetailVisible(true);
                },
              },
            ]}
          />
        );
      },
    },
  ];

  /** 配置操作按钮 */
  const button: AxStandardCardButtonType[] = [];

  const filter: AxStandardCardFilterType[] = [];

  const handleExpandedRowsChange = (expandedRows: any) => {
    setExpandedRowKeys(expandedRows);
  };

  const detailProps = {
    values: operateValues,
    visible: detailVisible,
    handleVisible: setDetailVisible
  }

  /** 取消订单 */
  const handleCancel = (record: any) => {
    postFormXhr(url.update, {
      id: record.id, orderStatus: 7
    }).then(() => {
      message.success('取消订单成功');
      ref.current.handleRefresh();
    })
  }

  /** 确认收货 */
  const handleReceive = (record: any) => {
    postFormXhr(url.update, {
      id: record.id, orderStatus: 6
    }).then(() => {
        message.success('确认收货成功');
        ref.current.handleRefresh();
    })
}

  return (
    <>
      <AxStandardWideList
        url={url}
        size="default"
        params={{ userId: user.id }}
        bodyStyle={{ padding: 0 }}
        columns={columns}
        button={button}
        filter={filter}
        checkboxModel={false}
        showTopSlider={false}
        // showSimpleSearch={false}
        // AdvancedSearch={Search}
        expandedRowKeys={expandedRowKeys}
        onExpandedRowsChange={handleExpandedRowsChange}
      />
      {detailVisible && <Detail {...detailProps} />}
    </>
  );
};

export default Index;
